<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scaleble=no,maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../assets/mui/css/mui.min.css">
<script src="../assets/zepto/zepto.min.js"></script>
<script src="../assets/artTemplate/template-native.js"></script>
<title>Document</title>
</head>
<body>
    <div class="mui-table-view">

    </div>



    <script id="my" type="text/template">
        <% for(var i=0 ; i < bbb.length ; i++){ %>
            <li class="mui-table-view-cell mui-media">
                <a href="javascript:;">
                    <img class="mui-media-object mui-pull-left" src="<%= bbb[i].photo %>>">
                    <div class="mui-media-body">
                        <%= bbb[i].name %>
                        <p class='mui-ellipsis'><%= bbb[i].hospital %><%= bbb[i].desc %><%= bbb[i].position %></p>
                    </div>
                </a>
            </li>
        <% } %>
    </script>

    <script>
        
        $.ajax({
            url:'data2.json',
            type:'get',
            dataType:'json',
            success:function(result){
                console.log(result);
                var html = template('my',{bbb:result.arr})

                $('.mui-table-view').html(html);
            }
        })
    </script>
</body>
</html>